/**
* @description: 路由器新增
* @author: JiWei
* @remark:
**/
<template>
  <view class="add-patrol-main">
    <nav-bar class="header" back title="通信路由器新增" @goBack="goBack"/>
    <!-- 切换tab -->
    <div class="patrol-info-tab">
      <div class="info-tab-item" :class="currentTab === 'basicInfo' ? ' info-tab-current': ''">基本信息</div>
      <div class="info-tab-item"  :class="currentTab === 'businessInfo' ? ' info-tab-current': ''">业务信息</div>
    </div>
    <div class="main-container">
      <!-- 基本信息 -->
      <div class="cable-info" v-if="currentTab === 'basicInfo'">
        <plateTitle title="基本信息" :isRequired="false" class="plate-title"/>
        <view class="cable-info-container">
          <van-form ref="ruleForm">
            <van-cell-group v-for="(item, index) in currentData.visibleProps" :key="index">
            <!-- 不可编辑框 -->
            <van-field v-model="item.value" v-if="item.elementType === 'TEXT'" :required="item.isRequired" readonly input-align="right" :value="item.value" :label="item.title" @click="checkInfo(item)"
                       :name="item.name" :rules="item.rules" error-message-align="right" />
            <!-- 弹出筛选框 -->
            <van-field
                v-if="item.elementType === 'PICKER'"
                :required="item.isRequired"
                readonly
                clickable
                input-align="right"
                :rules="item.rules"
                right-icon="arrow"
                v-model="item.text"
                :label="item.title"
                placeholder="点击选择"
                @click="checkPickerList(item)"
            />
            <!-- 弹出日期筛选框 -->
            <van-field
                v-if="item.elementType === 'TIMEPICKER'"
                :required="item.isRequired"
                readonly
                clickable
                input-align="right"
                :rules="item.rules"
                right-icon="arrow"
                v-model="item.text"
                :label="item.title"
                placeholder="点击选择"
                @click="checkPickerList(item)"
            />
            <!-- 输入框 -->
            <van-field
                v-if="item.elementType === 'INPUT'"
                :type="item.inputType"
                :required="item.isRequired"
                clickable
                input-align="right"
                :rules="item.rules"
                :value="item.value"
                :label="item.title"
                placeholder="请输入"
                @input="inputBlur($event, item)"
            />
            <!-- 输入带扫码 -->
            <van-field v-if="item.elementType === 'INPUT&SCAN'" :required="item.isRequired" input-align="right" right-icon="scan" @input="inputBlur($event, item)" @click-right-icon="scanQrcode(item)"
                       :value="item.value" :label="item.title" />
          </van-cell-group>
          </van-form>
        </view>

      </div>
      <!-- 业务信息 -->
      <div class="fibre-info" v-else>
        <view class="plan-info-title">
          <plateTitle title="路由器业务" :isRequired="false" class="plate-title">
            <slot>
              <img class="palant-img" src="../../../../../static/img/ywadd.png" alt="" @click="addType">
            </slot>
          </plateTitle>
        </view>
        <van-form ref="formRule">
        <view class="router-business" v-for="(item,index) in chooseList" :key="index">
          <view class="business-img">
            <img @click="removeType(item,index)" src="../../../../../static/img/delete.png" alt="">
          </view>

            <van-field input-align="right" disabled v-model="item.routerBuzName" label="业务名称"
                       :rules="item.routerBuzNameRule" placeholder="请选择" right-icon="arrow"
                       required @click-right-icon="handleSelecBuinessName(index)" />
            <van-field input-align="right" disabled v-model="item.portType" label="端口类型"
                       :rules="item.portTypeRule" placeholder="请选择" right-icon="arrow"
                       required @click-right-icon="handleSelecBuiness(index)" />
            <van-row>
              <van-col span="6">
                <van-field label="端口" required />
              </van-col>
              <van-col span="6">
                <van-field v-model="item.slotc" placeholder="槽" :rules="item.slotcRule"/>
              </van-col>
              <van-col span="6">
                <van-field v-model="item.subslot" placeholder="子槽" :rules="item.subSlotRule"/>
              </van-col>
              <van-col span="6">
                <van-field v-model="item.portName" placeholder="端口" :rules="item.prorNameRule"/>
              </van-col>
            </van-row>
        </view>
        </van-form>
      </div>
    </div>
    <!--按钮-->
    <van-button block @click="nextSave" v-if="currentTab === 'basicInfo'">下一步</van-button>
    <van-button block @click="saveOptical" v-if="currentTab === 'businessInfo'">提交</van-button>
    <!--时间选择器-->
    <van-popup v-model="showTimePicker" position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :formatter="formatter"
          :min-date="minDate"
          show-toolbar
          cancel-button-text="清空"
          @confirm="pickerConfirm"
          @cancel="pickerEmpty"
      />
    </van-popup>
    <!--选择器-->
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          ref="picker"
          :default-index="defaultPickerIndex"
          show-toolbar
          :columns="currentPickerList"
          cancel-button-text="清空"
          @confirm="pickerConfirm"
          @cancel="pickerEmpty"
          @change="pickerChange"
      />
    </van-popup>
    <van-popup v-model="showNamePicker" position="bottom">
      <van-picker ref="typePicker" show-toolbar :columns="typeColumns" cancel-button-text="清空"
                  @confirm="onTypeConfirm" @cancel="pickerNameEmpty" />
    </van-popup>
    <van-popup v-model="showTorpPicker" position="bottom">
      <van-picker ref="typePicker" show-toolbar :columns="stateColumns" cancel-button-text="清空"
                  @confirm="onStateConfirm" @cancel="pickerTorpEmpty" />
    </van-popup>
  </view>
</template>
<script>
import moment from "moment/moment";

let infoOptical_add = {

  hideProps: {
    "taskId":"task001",    //所属工单id    //必填
    "siteid": "s001",   //所属站点
    "sitename": "",   //所属站点
    "tourOperId": "2",      //巡检人ID  必填      userId放进来
    "tourOperName": "2",    //巡检人名称    必填       userName放进来
    "producerIdCustom": "", // 自定义设备厂家名称
    "modelnumberCustom": "" // 自定义设备型号名称
  },
  visibleProps:{
    // "equname": {
    //   title: "设备名称",
    //   keys: "equname",
    //   value: "",
    //   isRequired: true,
    //   elementType: "TEXT"
    // },   // 设备名称
    "sitename": {
      title: '所属站点',
      keys: 'sitename',
      value: '',
      isRequired: true,
      elementType: "TEXT",
      name:'sitename',
      rules:[{ required: true, trigger:'onSubmit'}]
    },   //所属站点名称
    "parRoom": {
      title: "所属机房",
      keys: "parRoom",
      value: "",
      text: "",
      isRequired: false,
      elementType: 'PICKER',
      optionsParams: { type: 'room' } // 获取options需要的参数
    }, //所属机房
    "parRack": {
      title: '所属机柜编号',
      keys: 'parRack',
      value: '',
      isRequired: true,
      elementType: "INPUT",
      name:'parRack',
      rules:[{ required: true, trigger:'onSubmit'}]
    },   //所属机柜编号
    "parRackScreen": {
      title: "所属机柜屏眉",
      keys: "parRackScreen",
      value: "",
      isRequired: true,
      elementType: 'INPUT',
      name:'parRackScreen',
      rules:[{ required: true, trigger:'onSubmit'}]
    }, //所属机柜屏眉
    "dspLevel": {
      title: "设备所属通信网等级",
      keys: "dspLevel",
      value: "",
      text: "",
      isRequired: true,
      elementType: 'PICKER',
      optionsParams: { type: 'level' }, // 获取options需要的参数
      rules:[{ required: true, trigger:'onSubmit'}]
    }, //所属机房
    "producerId": {
      title: "设备品牌",
      keys: "producerId",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {type: "router"}, // 获取options需要的参数
      name:'producerId',
      rules:[{ required: true, trigger:'onSubmit'}]
    },  //设备品牌
    "modelnumber": {
      title: "设备型号",
      keys: "modelnumber",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {type: "routermodel"}, // 获取options需要的参数
      name:'modelnumber',
      rules:[{ required: true, trigger:'onSubmit'}]

    }, //设备型号
    "equStatus": {
      title: "设备角色",
      keys: "equStatus",
      value: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {type: "DEVICE_ROLE"}, // 获取options需要的参数
      name:'equStatus',
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 设备角色
    "serilanum": {
      title: "设备顺序",
      keys: "serilanum",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {type: "seril"}, // 获取options需要的参数
      rules:[{ required: true, trigger:'onSubmit'}]
    },   //设配顺序
    "entityid": {
      title: "实物ID",
      keys: "entityid",
      value: "",
      isRequired: false,
      elementType: 'INPUT&SCAN'
    }, //实物ID
    begTim: {
      title: '设备投运时间',
      keys: 'begTim',
      value: '',
      text: '',
      isRequired: false,
      elementType: "TIMEPICKER"
    },   //设备投运时间
    "moduleNum": {
      title: "电源模块数量",
      keys: "moduleNum",
      value: "",
      isRequired: true,
      elementType: "INPUT",
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 电源模块数量
    "powerSupplyMode": {
      title: "电源供电方式",
      keys: "powerSupplyMode",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {type: "POWER_SUPPLY_MODE"}, // 获取options需要的参数
      name:'powerSupplyMode',
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 电源模块数量
    "ethernetNum": {
      title: "以太网口数量",
      keys: "ethernetNum",
      value: "",
      isRequired: true,
      elementType: "INPUT",
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 设备顺序
    "portNum": {
      title: "2M口数量",
      keys: "portNum",
      value: "",
      isRequired: true,
      elementType: "INPUT",
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 设备顺序
    "lightNum": {
      title: "光口数量",
      keys: "lightNum",
      value: "",
      isRequired: true,
      elementType: "INPUT",
      rules:[{ required: true, trigger:'onSubmit'}]
    },   // 设备顺序"
     "comboNum": {
      title: "光电复用口数量",
      keys: "comboNum",
      value: "",
      isRequired: true,
      elementType: "INPUT",
       rules:[{ required: true, trigger:'onSubmit'}]
    },   // 设备顺序
  }
}
let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "正面照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../../static/img/lyqzm.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "反面照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../../static/img/lyqfm.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
import navBar from "../../../../../components/common/nav-bar";
import plateTitle from '../../../../../components/business/plateTitle.vue';
import {Dialog, Toast} from "vant";
import wx from "../../../../../static/common_js/jweixin_1.0.0";
import {mapGetters} from "vuex";
export default {
  name: 'addRouterPatrol',
  components: { navBar,plateTitle },
  props: {},
  data() {
    return {
      currentTab: "basicInfo", // 当前显示内容
      currentData: {}, // 当前基本信息
      showTimePicker: false,
      currentDate: "",
      minDate: new Date(0),
      showPicker: false,
      currentChangeItem: '', // 当前正在修改的下拉项
      chooseList:[],
      showPreview: false,
      showCustomInput: false, // 是否在下拉框中显示自定义输入
      delList: [], // 被删除的列表，需要和后台交互
      objId:'',
      taskId:'',
      taskSiteId:'',
      taskSiteName:'',
      taskType:'',
      defaultPickerIndex: 0, // picker默认选中索引
      currentPickerList: [], // 当前可选的项
      showNamePicker:false,
      showTorpPicker:false,
      typeColumns:[],
      stateColumns:[],
      keyIndex:'',
      typeIndex:'',
      routerId:'',
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  onLoad(options) {
    this.objId = options.objId
    this.taskId = options.taskId
    this.taskSiteId = options.taskSiteId
    this.taskSiteName = options.taskSiteName
    this.taskType = options.state
    this.currentData = JSON.parse(JSON.stringify(infoOptical_add))
    this.files = JSON.parse(JSON.stringify(fileTemplate));
    this.currentData.hideProps = {
      // 新增业务线  taskid还未带过来，所属站点暂时不能选，
      parStationId: options.taskSiteId,   //所属站点
      taskId: options.taskId, //所属工单id    //必填
      siteid: options.taskSiteId, //所属站点
      sitename: options.taskSiteName, //所属站点name
      tourOperId: this.userData.userId, //巡检人ID  必填      userId放进来
      tourOperName: this.userData.userName, //巡检人名称    必填       userName放进来
      producerIdCustom:'',
      modelnumberCustom:'',
    }
    this.currentData.visibleProps.sitename.value = this.taskSiteName
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
      })
    },
    saveOptical() {
      this.$refs.formRule.validate().then(() => {
        Toast.loading({
          duration:0,
          message: '加载中...',
          forbidClick: true,
        });
        let params = {
          ...this.currentData.hideProps,
          routerId: this.routerId,
          taskId: this.taskId,
          chooseList: this.chooseList
        }
        this.$api.insertRouterBuz(params).then(res => {
          if(res.code == 0) {
            Toast.clear()
            Dialog.confirm({
              title: '新增成功',
              showCancelButton: false,
            }).then(() => {
              uni.navigateTo({
                url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
              })
            })
          }
        })
      }).catch(() => {
        Toast('请完善内容');
      })

    },
    // 基本信息下一步
    nextSave() {
      this.$refs.ruleForm.validate().then(() => {
        this.baseInfoSubmit()
      }).catch(() => {
        Toast('请完善内容');
      })
    },
    baseInfoSubmit() {
      Toast.loading({
        duration:0,
        message: '加载中...',
        forbidClick: true,
      });
      let params = {
        ...this.currentData.hideProps,
        ...Object.values(this.currentData.visibleProps).reduce((prev, item) => {
          if (item.elementType === "TIMEPICKER") {
            prev[item.keys] = item.text;
          } else {
            prev[item.keys] = item.value;
          }
          return prev
        }, {}),
      }
      this.$api.insertRouter(params).then(res => {
        console.log(res.code,423423423)
        if(res.code == 0) {
          Toast.clear()
          this.routerId = res.data
          this.currentTab = 'businessInfo'
        }else if(res.code == 500) {
          Toast.clear()
          Toast.fail(res.msg);
          uni.navigateTo({
            url: `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskId=${this.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
          })
        }else {
          Toast.fail(res.msg);
        }
      })
    },
    checkInfo(item) {
      this.currentChangeItem = item.keys
    },
    // 在下拉框中改变选项
    pickerChange (curOption, curValue) {
      this.showCustomInput = curValue.text === '其他';
    },
    checkPickerList (optionItem) {
      this.currentChangeItem = optionItem.keys;
      console.log(optionItem,423423)
      if(optionItem.elementType === "TIMEPICKER") {
        this.currentDate = this.currentData.visibleProps[this.currentChangeItem].text !== ""
            ? new Date(this.currentData.visibleProps[this.currentChangeItem].text)
            : new Date();
        this.showTimePicker = true;
      }
      // 下拉选项不为日期类型时，获取可选列表
      else {
        this.showCustomInput = false;
        this.customInput = "";
        // 选项为设备型号时，请求传参带入设备品牌
        if(this.currentChangeItem === "modelnumber") {
          if(this.currentData.visibleProps.producerId.value === "") {
            Dialog.alert({
              message: '请先选择设备品牌',
              theme: 'round-button',
            });
            return;
          } else {
            optionItem.optionsParams.pid = this.currentData.visibleProps.producerId.value;
          }
        }
        

        if (this.currentChangeItem === 'parRoom') {
          optionItem.optionsParams.pid = this.currentData.hideProps.siteid;
        }
        if(optionItem.keys === "equStatus") {
          this.$api.todoTaskApi.selectList_Optical({kdCode:'DEVICE_ROLE'}).then(res => {
            this.currentPickerList = res.data.list.map(item => {
              return {
                origin: item,
                text: item.NAME,
                value: item.BRIEFNAME,
              }
            });
            this.showPicker = true;
          });
        } else if (optionItem.keys === "powerSupplyMode"){
          // 选项为电源供电方式
          this.$api.todoTaskApi.selectList_Optical({kdCode:'POWER_SUPPLY_MODE'}).then(res => {
            this.currentPickerList = res.data.list.map(item => {
              return {
                origin: item,
                text: item.NAME,
                value: item.BRIEFNAME,
              }
            });
            this.showPicker = true;
          });
        } else {
          // 获取可选列表
          this.$api.todoTaskApi.selectList_equipment(optionItem.optionsParams).then(async res => {
            await (this.showPicker = true);
            this.currentPickerList = res.data.map((item, index) => {
              if (item.TOTAL === this.currentData.visibleProps[this.currentChangeItem].text) {
                this.defaultPickerIndex = index;
                this.$refs.picker.setColumnIndex(0, index);
              }
              return {
                text: item.TOTAL,
                value: item.VALUE,
              }
            });
            // 如果选项为设备型号/设备品牌时，可自定义
            if(this.currentChangeItem === 'modelnumber' || this.currentChangeItem === 'producerId') {
              this.currentPickerList.push({
                text: '其他',
                value: 'other',
              })
              // 如果请求回来的下拉列表不包含当前表单项
              let includes = res.data.some((item, index) => {
                return item.TOTAL === this.currentData.visibleProps[this.currentChangeItem].text
              })
              if (!includes) {
                // 如果当前表单项的值为空，picker默认选中第一项
                if(this.currentData.visibleProps[this.currentChangeItem].text === '') {
                  this.defaultPickerIndex = 0;
                  this.$refs.picker.setColumnIndex(0, 0);
                  // 如果下拉列表只有’其他‘，则显示自定义输入框
                  if (this.currentPickerList.length === 1) {
                    this.showCustomInput = true;
                  }
                }
                // 如果当前表单项的值不为空，picker默认选至'其他'，自定义值默认填入当前下拉项的值
                else {
                  this.showCustomInput = true;
                  this.defaultPickerIndex = this.currentPickerList.length - 1;
                  this.$refs.picker.setColumnIndex(0, this.currentPickerList.length - 1);
                  this.customInput = this.currentData.visibleProps[this.currentChangeItem].text;
                }
              }
            }
          });
        }

      }
    },
    inputBlur(value, item) {
      this.currentChangeItem = item.keys;
      this.currentData.visibleProps[this.currentChangeItem].value = value;
    },
    formatter(type, val) {
      if (type === 'year') return val + '年'
      if (type === 'month') return val + '月'
      if (type === 'day') return val + '日'
    },
    // picker确认选择(所有下拉)
    pickerConfirm(selectedOption) {
      if (this.currentChangeItem === 'begTim') {
        this.currentData.visibleProps[this.currentChangeItem].text = moment(selectedOption).format('YYYY-MM')
        this.showTimePicker = false
      } else {
        // 下拉列表不为空
        if (selectedOption !== undefined) {
          // 如果选择的设备品牌与上一次不同，设备型号清空
          if (this.currentChangeItem === "producerId" && selectedOption.value !== this.currentData.visibleProps.producerId.value) {
            this.currentData.visibleProps.modelnumber.text = "";
            this.currentData.visibleProps.modelnumber.value = "";
            this.currentData.hideProps.producerIdCustom = "";
            this.currentData.hideProps.modelnumberCustom = "";
          }
          // 如果选择的设备型号与上一次不同，清空自定义设备型号
          else if (this.currentChangeItem === "modelnumber" && selectedOption.value !== this.currentData.visibleProps.modelnumber.value) {
            this.currentData.hideProps.modelnumberCustom = "";
          }

          if (selectedOption.text === '其他') {
            this.currentData.visibleProps[this.currentChangeItem].value = selectedOption.value;
            this.currentData.visibleProps[this.currentChangeItem].text = this.customInput;
            this.currentData.hideProps[this.currentChangeItem + "Custom"] = this.customInput;
          } else {
            this.currentData.visibleProps[this.currentChangeItem].value = selectedOption.value;
            this.currentData.visibleProps[this.currentChangeItem].text = selectedOption.text;
          }
        }
        this.showPicker = false;
      }
    },
    // 清空已选
    pickerEmpty(selectedOption) {
      if (this.currentChangeItem === 'begTim') {
        this.showTimePicker = false
        this.currentData.visibleProps[this.currentChangeItem].text = ''
      }else {
        this.showPicker = false;
        this.currentData.visibleProps[this.currentChangeItem].text = "";
        this.currentData.visibleProps[this.currentChangeItem].value = "";
        if(selectedOption !== undefined) {
          selectedOption.text = "";
          selectedOption.value = "";
        }
        // 清空设备品牌，同时清空设备型号
        if (this.currentChangeItem === "producerId") {
          this.currentData.visibleProps.modelnumber.text = "";
          this.currentData.visibleProps.modelnumber.value = "";
          this.currentData.hideProps.producerIdCustom = "";
          this.currentData.hideProps.modelnumberCustom = "";
        }
        // 清空设备型号
        else if (this.currentChangeItem === "modelnumber") {
          this.currentData.hideProps.modelnumberCustom = "";
        }
      }
    },
    // 清空业务名称已选
    pickerNameEmpty(){
      this.showNamePicker = false
      this.chooseList[this.keyIndex].routerBuzName = ''
    },
    // 清空端口类型已选
    pickerTorpEmpty(){
      this.showTorpPicker = false
      this.chooseList[this.typeIndex].portType = ''
    },
    scanQrcode (item) {
      let _this = this
      wx.scanQRCode({
        desc:"scanQRCode desc",
        needResult: 1,
        scanType:["qrCode"],
        success:function(res){
          _this.currentData.visibleProps.entityid.value = res.resultStr
        },
        error:function(res){
          console.log("scanQRCode error",res);
        }
      });
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
            .then(() => {
              this.$set(this.files, imgIndex, {
                ...this.files[imgIndex],
                raw: null,
                img: ''
              })
              this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

            })
            .catch(() => {
              // on cancel
            })
      }
    },
    choosePhoto(imgItem, index) {
      wx.chooseImage({
        count:3,
        sourceType: ['album','camera'],
        success: (chooseImageRes) => {
          this.h5_url_to_blob(chooseImageRes.localIds[0]).then(res => {
            this.$set(this.files, index, {
              ...this.files[index],
              raw: res,
              img: chooseImageRes.localIds[0]
            })

            if (this.delList.includes(imgItem.type)) {
              this.delList = this.delList.filter(item => {
                if (item === imgItem.type) {
                  return false;
                }

                return true;
              })
            }

          })
        }
      });
    },
    h5_url_to_blob(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
          if (this.status == 200) {
            var Blob = this.response;
            // console.log(myBlob)
            resolve(Blob)
            // myBlob现在是对象URL指向的blob。
          }
        };
        xhr.send();
      })
    },
    handleSelecBuinessName(index) {
      this.keyIndex = index
      let params = {
        kdCode:'BUSINESS_NAME'
      }
      this.$api.routerSelectList(params).then(res => {
        console.log(res,321)
        if (res.code == 0) {
          this.showNamePicker = true
          this.$nextTick(() => {
            this.typeColumns = res.data.list.map((item, index) => {
              return {
                text: item.NAME,
                value: item.BRIEFNAME,
              };
            });
          })
        }
        this.typeColumns = res.data.list.map(item => {
          return item.NAME
        })
      })
    },
    onTypeConfirm(value,index) {
      this.chooseList.map((item, key) => {
        if (key == this.keyIndex) {
          item.routerBuzName = value.text
        }
        return item;

      })
      this.showNamePicker = false;
    },
    onStateConfirm(value,index) {
      this.chooseList.map((item, key) => {
        if (key == this.typeIndex) {
          item.portType = value.text
        }
        return item;

      })
      this.showTorpPicker = false;
    },
    handleSelecBuiness(index) {
      this.typeIndex = index
      let params = {
        kdCode:'PORT_TYPE'
      }
      this.$api.routerSelectList(params).then(res => {
        if (res.code == 0) {
          this.showTorpPicker = true
          this.$nextTick(() => {
            this.stateColumns = res.data.list.map((item, index) => {
              return {
                text: item.NAME,
                value: item.BRIEFNAME,
              };
            });
          })
        }
        this.stateColumns = res.data.list.map(item => {
          return item.NAME
        })
      })
    },
    addType() {
      this.chooseList.push({
        routerBuzName:'',
        portType:'',
        slotc:'',
        subslot:'',
        portName:'',
        routerBuzNameRule:[{
          required: true,
          trigger: 'onSubmit'
        }],
        portTypeRule:[{
          required: true,
          trigger: 'onSubmit'
        }],
        slotcRule:[{
          required: true,
          trigger: 'onSubmit'
        }],
        subSlotRule:[{
          required: true,
          trigger: 'onSubmit'
        }],
        prorNameRule:[{
          required: true,
          trigger: 'onSubmit'
        }],
      })
    },
    removeType(item,index) {
      this.chooseList.splice(index,1)
    },
  }
};
</script>
<style scoped lang="scss">
.add-patrol-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242,246,250,1);
  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }

  .cable-state{
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cable-state-title {
      font-size: px2vw(42);
    }
    .cable-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.cable-state-on {
        color: rgba(255,67,85,1);
        background-color: rgba(255,67,85,0.1);
      }

      &.cable-state-off {
        color: rgba(65,220,131,1);
        background-color: rgba(65,220,131,0.1);
      }
    }
  }
  .patrol-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(37);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51,51,51,1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65,122,220,1);
        color: rgba(255,255,255,1);
        font-weight: Bold;
      }
    }
  }
  .main-container {
    height: calc(100vh - #{px2vh(574)});
    overflow: auto;
    .cable-info {
      width: calc(100% - #{px2vw(60)});
      margin: auto;
      padding-bottom: px2vh(30);
      .plate-title {
        margin-bottom: px2vh(30);
      }
      .cable-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        margin-bottom: px2vh(30);
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;

        /deep/ .van-radio {
          margin-right: px2vw(139.5)
        }

        .image-wrap {
          width: 100%;
          display: flex;

          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);

        .remark-wrap {
          background-color: #FAFAFA;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);

          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        .yellow {
          /deep/.van-cell__value {
            color: #FFAD0E;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417ADC;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41DC83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #FF4355;
          }
        }
      }
    }
    .fibre-info {
      .plan-info-title {
        width: calc(100% - #{px2vw(60)});
        margin-left: px2vw(30);
        margin-bottom: px2vh(30);
        .palant-img {
          width: px2vw(60);
        }
      }
      .router-business {
        width: calc(100% - #{px2vw(60)});
        height: auto;
        margin-left: px2vw(30);
        background: #fff;
        border-radius: px2vw(20);
        margin-bottom: px2vh(30);
        .business-img {
          width: 100%;
          text-align: right;
          img {
            width: px2vw(60);
          }
        }
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;

        /deep/ .van-radio {
          margin-right: px2vw(139.5)
        }

        .image-wrap {
          width: 100%;
          display: flex;

          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);

        .remark-wrap {
          background-color: #FAFAFA;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);

          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        .yellow {
          /deep/.van-cell__value {
            color: #FFAD0E;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417ADC;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41DC83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #FF4355;
          }
        }
      }
    }
  }
  /deep/ .van-field__label {
    width: 9em;
  }
  /deep/.van-button {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(50) auto px2vh(71);
    height: px2vh(120);
    color: #fff;
    background-color: #417ADC;
    border: 1px solid #417ADC;
    border-radius: px2vh(60);
  }
}
</style>
